<template>
    <div class="box">
        <h2><slot></slot></h2>
        <div class="liveBox">
<!--            <div class="imgBox" v-for="(item) in arr" :key="item.courseId" :style="{'background-image':'url('+item.course.coverFileUrl+')'}"></div>-->
            <div class="imgBox"><img v-for="(item) in arr" :key="item.courseId" :src="item.course.coverFileUrl" alt="" v-show="item.courseId==flag"></div>
            <div>
                <p v-for="(item) in arr" :key="item.courseId" class="leveHeadlines" @mouseover="Tab(item.courseId)" > 直播结束 &nbsp; &nbsp; &nbsp;    {{item.course.courseTitle}}</p>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "Live",
        data(){
            return{
                arr:[],
                current: '1',
                theme: 'dark',
                flag:"138",
            }
        },
        methods:{
            Tab(data){
                this.flag=data
                console.log(data)

            },
        },

        created() {
            let from= new URLSearchParams()
            from.append("total",1)
            this.$axios.post("http://wkt.myhope365.com/pc/liveCourseInfo/list",from).then((res)=>{
                this.arr = res.data.rows
            })
        },
    }
</script>

<style scoped>
    .box{
        margin: auto;
        width: 1100px;

    }
    h2{
        margin: 20px auto;
        padding-bottom: 10px;
        width: 1100px;
        text-align: center;
    }
    .liveBox{
        display: flex;
        justify-content: space-between;
        height: 370px;
    }
    .liveBox>div{
        width: 50%;
        overflow: hidden;
    }
    .imgBox>img{
        width: 100%;
        height: 100%;
    }
    .leveHeadlines:hover{
        cursor: pointer;
        background: #fff;
        border-left: 5px solid #00cf8c;
        color: #00cf8c;
    }
    .leveHeadlines{
        height: 50px;
        line-height: 50px;
        padding: 0 10px 0 30px;
        font-size: 16px;
        border-left: 5px solid transparent;

    }
</style>